<template>
  <vab-dialog v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="60%">
    <template #default>
      <CommonForm
        ref="commonFormRef"
        v-model="form"
        v-loading="formLoading"
        :layout-config="layoutConfig"
        :option="option"
        @on-cancel="onHandleCancel"
        @on-success="onHandleSuccess"
      />
    </template>
  </vab-dialog>
</template>

<script>
import CommonForm from "@/plugins/form/CommonForm.vue";
import VabDialog from "@/plugins/VabDialog/index.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import { getDetails } from "@/api/mains";
export default defineComponent({
  name: "RoleEdit",
  components: {
    CommonForm,
    VabDialog
  },
  emits: { "on-success": null },
  setup(props, { expose, emit }) {
    const state = reactive({
      url: "system/role",
      addUrl: "system/role/add",
      updateUrl: "system/role/update",
      isShowDialog: false,
      formLoading: false,
      layoutConfig: {
        //form组件布局
        column: 2
      }
    });

    const form = ref({});
    const option = {
      column: [
        {
          label: "角色编码",
          prop: "roleKey",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "角色名称",
          prop: "roleName",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "角色排序",
          prop: "roleSort",
          type: TableColumnOrFormTypeEnum.INPUTNUMBER,
          precision: 0,
          min: 0,
          max: 999
        },
        {
          label: "角色状态",
          prop: "status",
          type: TableColumnOrFormTypeEnum.RADIO,
          dictCode: "sys_normal_disable"
        },
        {
          label: "角色描述",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          placeholder: "请输入角色描述",
          expand: 2
        }
      ],
      formConfig: {
        title: "",
        isInModal: true
      },
      rules: {
        roleKey: [
          {
            required: true,
            trigger: "blur",
            message: "请输入角色编码"
          },
          {
            min: 1,
            max: 20,
            message: "输入长度 1 至 20",
            trigger: "blur"
          }
        ],
        roleName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入角色名称"
          },
          {
            min: 1,
            max: 50,
            message: "输入长度 1 至 50",
            trigger: "blur"
          }
        ],
        roleSort: [{ required: true, trigger: "blur", message: "请输入角色排序" }],
        status: [{ required: true, trigger: "blur", message: "请选择角色状态" }],
        memo: [
          {
            max: 50,
            message: "输入最大长度50",
            trigger: "blur"
          }
        ]
      },
      submitUrl: state.updateUrl
    };

    const showDialog = async row => {
      state.isShowDialog = true;
      if (row && row.id) {
        option.submitUrl = state.updateUrl;
        // state.formLoading = true;
        const response = await getDetails(state.url, row.id);
        // state.formLoading = false;
        form.value = response.data;
      } else {
        option.submitUrl = state.addUrl;
        form.value = { status: "0" }; //默认角色状态为正常
      }
    };

    const onHandleSuccess = () => {
      emit("on-success");
      onHandleCancel();
    };

    const onHandleCancel = () => {
      state.isShowDialog = false;
    };

    expose({ showDialog });
    return {
      ...toRefs(state),
      form,
      option,
      onHandleSuccess,
      onHandleCancel
    };
  }
});
</script>
